<script>
export default {
  name: 'Login',
  data() {
    return {
      login_form: {
        account: '',
        pwd: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    // 用户登录校验
    subForm() {
      this.$refs.login_form.validate((valid) => {
        if (valid) {
          // 调用用户登录的方法
          this.userLogin();
        } else {
          this.$message.error("请输入正确的账号和密码");
          return false;
        }
      });
    },
    // 用户登录
    async userLogin() {
      try {
        let { data: res } = await this.$axios.post("user/userLogin", this.login_form);

        if (res.success) {
          this.$message.success("登录成功！");
          // 存储 token 信息到 localStorage 中
          window.localStorage.setItem("token", res.data.token);
          window.sessionStorage.setItem("name", res.data.name);
          window.sessionStorage.setItem("icon", res.data.icon);
          // 跳转到主页
          this.$router.push("/home");
        } else {
          this.$message.error("登录失败，请检查账号和密码！");
        }
      } catch (error) {
        this.$message.error("登录请求失败，请稍后再试！");
      }
    },
    // 重置表单
    resetForm() {
      this.$refs.login_form.resetFields();
      window.localStorage.removeItem('token');
      window.sessionStorage.removeItem('name');
      window.sessionStorage.removeItem('icon');
    }
  }
}
</script>

<template>
  <div class="bg">
    <div class="login_container">
      <div class="img_container">
        <img src="@/assets/logo.png" />
      </div>

      <el-form :rules="rules" ref="login_form" :model="login_form" label-width="80px" class="login_form">
        <el-form-item label="账号" prop="account">
          <el-input prefix-icon="el-icon-user" size="small" v-model="login_form.account"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pwd">
          <el-input prefix-icon="el-icon-lock" show-password size="small" v-model="login_form.pwd"></el-input>
        </el-form-item>

        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" size="medium" round @click="subForm">登录</el-button>
          <el-button type="info" round size="medium" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.bg {
  background: url("@/assets/bg.jpg") no-repeat fixed;
  background-size: 100% 100%;
  height: 100%;
}
.login_container {
  width: 350px;
  height: 350px;
  background-color: beige;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5%;
  opacity: 0.9;
}
.img_container {
  width: 130px;
  height: 130px;
  background-color: bisque;
  border-radius: 50%;
  padding: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(241, 231, 231, 0.192);
}
.img_container img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: cornsilk;
}
.login_form {
  position: absolute;
  bottom: 0px;
  left: -15px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: center;
}
</style>
